<template>
  <div>
    <ContentTitle :info="ctInfo" />
    <!-- 搜索 -->
    <el-card class="bor-card">
      <div class="flex jc-sb">
        <div class="fg1">
          <el-form ref="form" :inline="true" :model="query" label-width="80px">
            <el-form-item label="群组名称">
              <el-input
                v-model="query.keyword"
                placeholder="群组名称"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-search"
                @click="onSubmit"
                >搜索</el-button
              >
              <span class="search-span">搜索结果：{{ total }}</span>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button style="float: right" type="primary" @click="addDialog;"
            >新增群组 ＋</el-button
          >
        </div>
      </div>
    </el-card>
    <!-- 弹窗 新增和修改 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="群组名称" prop="groupName">
          <el-input v-model="ruleForm.groupName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlelOk">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 表格 -->
    <el-table :data="groupList" border style="width: 100%">
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="groupName" label="群组名称"></el-table-column>
      <el-table-column prop="nodeNums" label="传感器节点数量">
      </el-table-column>
      <el-table-column prop="onlineNums" label="在线设备属性">
      </el-table-column>
      <el-table-column prop="cTime" label="创建时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="showDialog(scope.row.id, scope.row.groupName)"
            >重命名</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="handleDel(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block bg-fff center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="query.currPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ContentTitle from "@/components/ContentTitle.vue";
//引入 api接口
import { $groupList, $groupAdd, $groupEdit, $groupDel } from "@/api/index.js";
export default {
  name: "developKit",
  components: { ContentTitle },
  data() {
    return {
      ctInfo: {
        type: "设备",
        text: "节点群组",
        msg: "以分组的形式管理节点设备，提供了搜索，添加新的群组，重命名、移动设备等功能",
      },
      groupList: [], //群组列表信息
      query: {
        //搜索和分页的数据
        currPage: 1, //当前页
        pageSize: 5, //每页条数
        keyword: "", //群组名称
      },
      total: 0,
      dialogVisible: false, //弹窗是否显示 false 不显示：true 显示
      ruleForm: { groupName: "" }, //添加或修改时，群组名称
      rules: {
        //做验证处理 validate
        groupName: [
          { required: true, message: "请输入群组名称", trigger: "blur" },
        ],
      },
      editId: "", //要修改的数据id
    };
  },
  created() {
    this.getGroupList();
  },
  methods: {
    //删除
    handleDel(id) {
      //删除前需要确认
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          $groupDel({ id: id }).then((res) => {
        console.log(res);
        if(res.data.code == 666){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.query.currPage = 1;
        //重新渲染
        this.getGroupList();
        } 
      });
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      
    },
    //显示添加接口
    addDialog() {
      this.dialogVisible = true;
      this.editId = "";
      this.ruleForm.groupName = "";
    },
    //显示修改窗口，并把群组信息带过去
    showDialog(id, groupName) {
      this.dialogVisible = true;
      this.editId = id;
      this.ruleForm.groupName = groupName;
    },
    //点击确认按钮
    handlelOk() {
      //验证 表单提交的数据是否符合验证条件
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          //判断是添加还剩修改
          if (this.editId !== "") {
            //修改
            this.editIdem();
          } else {
            this.addItem();
          }
        } else {
          return false;
        }
      });
    },
    //添加
    addItem() {
      //添加接口
      $groupAdd({ groupName: this.ruleForm.groupName }).then((res) => {
        console.log(res);
        //1. 判断是否添加成功
        if (res.data.msg == "success") {
          //2.关闭弹窗
          this.dialogVisible = false;
          //3. 重新调用列表接口
          this.getGroupList();
        }
      });
    },
    //修改
    editIdem() {
      $groupEdit({ id: this.editId, groupName: this.ruleForm.groupName }).then(
        (res) => {
          console.log(res);
          //1. 判断是否修改成功
          if (res.data.msg == "success") {
            //2.关闭弹窗
            this.dialogVisible = false;
            //3. 重新调用列表接口
            this.getGroupList();
          }
        }
      );
    },

    //搜索
    onSubmit() {
      this.query.currPage = 1;
      //重新获取数据
      this.getGroupList();
    },
    getGroupList() {
      $groupList(this.query).then((res) => {
        console.log(res.data.data);
        this.groupList = res.data.data;
        this.total = res.data.total;
      });
    },
    //修改分页的每页显示条数
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.currPage = 1;
      //重新获取数据
      this.getGroupList();
    },
    handleCurrentChange(val) {
      //将当前页的页码赋值给 currPage
      this.query.currPage = val;
      //重新获取数据
      this.getGroupList();
    },
  },
};
</script>

<style scoped lang="less">
// .el-input {
//   width: 25%;
// }
</style>
